<style>

</style>

<template>
  <p>
    <a-space>
        <TrainSelectView v-model="queryParam.trainCode" width="200px"></TrainSelectView>
        <a-date-picker v-model="queryParam.date" valueFormat="YYYY-MM-DD" placeholder="请选择日期" />
        <a-button type="primary" @click="handleQuery()">查询</a-button>
    </a-space>
    </p>
    <a-table 
        :dataSource="confirmOrders" 
        :columns="columns" 
        :pagination="pagination" 
        :loading="loading"
        @change="handleTableChange" 
    >
    
        <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'operation'" />
            <template v-else-if="column.dataIndex === 'status'">
                <span v-for="item in CONFIRM_ORDER_STATUS_ARRAY" :key="item.code">
                    <span v-if="item.code === record.status">
                        {{item.desc}}
                    </span>
                </span>
            </template>
        </template>
    </a-table>
</template>

<script>
import { defineComponent,ref,onMounted} from 'vue';
import { notification } from 'ant-design-vue';
import axios from 'axios';
import TrainSelectView from '@/components/TrainSelectView.vue';

export default defineComponent({
    name: " confirmOrder-view",
    components: { TrainSelectView },
    setup() {
        const CONFIRM_ORDER_STATUS_ARRAY = window.CONFIRM_ORDER_STATUS_ARRAY;
        // 展示模态窗的标签的定义
        const visible = ref(false);
        const loading = ref(false);
        const queryParam = ref({
            trainCode: null,
            date: null
        });
        // 定义车站对象
        let confirmOrder = ref({
            id: undefined,
            memberId:undefined,
            date:undefined,
            trainCode: undefined,
            start: undefined,
            end: undefined,
            dailyTrainTicketId: undefined,
            tickets: undefined,
            status: undefined,
            createTime: undefined,
            updateTime: undefined
        });
        const confirmOrders = ref([]);
        const columns = [
            {
                title: '会员id',
                dataIndex: 'memberId',
                key: 'memberId',
            },
            {
                title: '日期',
                dataIndex: 'date',
                key: 'date',
            },
            {
                title: '车次编号',
                dataIndex: 'trainCode',
                key: 'trainCode',
            },
            {
                title: '出发站',
                dataIndex: 'start',
                key: 'start',
            },
            {
                title: '到达站',
                dataIndex: 'end',
                key: 'end',
            },
            {
                title: '余票ID',
                dataIndex: 'dailyTrainTicketId',
                key: 'dailyTrainTicketId',
            },
            {
                title: '车票',
                dataIndex: 'tickets',
                key: 'tickets',
            },
            {
                title: '订单状态',
                dataIndex: 'status',
                key: 'status',
            },
        ];
        let pagination = ref({
            total: 0,
            current: 1,
            pageSize: 10,
        });

        // 车站信息列表查询的方法
        const handleQuery = e => {
            // 刷新时候不带参数的判断
            if (!e) {
                e = {
                    page: 1,
                    limit: pagination.value.pageSize
                };
            }
            // 开启loading效果
            loading.value = true;
            axios.get("/business/admin/confirm-order/query", {
                params: {
                    page: e.page,
                    limit: e.limit,
                    trainCode: queryParam.value.trainCode,
                    date: queryParam.value.date
                }
            })
                .then(response => {
                // 关闭loading效果
                loading.value = false;
                let respData = response.data;
                let trainCarriageDataList = respData.data.dataList;
                // 对车厢座位类型进行转换
                trainCarriageDataList.forEach(confirmOrder => {
                    switch (confirmOrder.seatType) {
                        case "1":
                            confirmOrder.seatType = "一等座";
                            break;
                        case "2":
                            confirmOrder.seatType = "二等座";
                            break;
                        case "3":
                            confirmOrder.seatType = "软卧";
                            break;
                        case "4":
                            confirmOrder.seatType = "硬卧";
                            break;
                    }
                });
                // 分页控件的设置
                let total = respData.data.total;
                let currentPage = respData.data.currentPage;
                let pageSize = respData.data.pageSize;
                confirmOrders.value = trainCarriageDataList;
                pagination.value.current = currentPage;
                pagination.value.pageSize = pageSize;
                pagination.value.total = total;
            })
                .catch(error => {
                // 关闭loading效果
                loading.value = false;
                let errData = error.response.data;
                console.log(errData);
                notification.error({ description: errData.data });
            });
        };
        // 页码的点击事件
        const handleTableChange = (pagination) => {
            console.log("pagination:", pagination.value);
            // 调用车站列表查询方法
            handleQuery({
                page: pagination.current,
                limit: pagination.pageSize
            });
        };
        // 钩子函数，页面初始化的时候执行
        onMounted(() => {
            handleQuery({
                page: pagination.value.current,
                limit: pagination.value.pageSize
            });
        });
        return {
            CONFIRM_ORDER_STATUS_ARRAY,
            visible,
            loading,
            queryParam,
            confirmOrder,
            confirmOrders,
            columns,
            pagination,
            handleQuery,
            handleTableChange
        };
    },
});
</script>